<template>
  <div class="login-container">
    <!-- 顶部Logo区域 -->
    <div class="header">
      <img class="logo" src="@/static/logo.png" alt="门店管理系统Logo" />
      <h1 class="system-name">门店管理系统</h1>
    </div>
    <u-upload
      :fileList="fileList1"
      @afterRead="afterRead"
      @delete="deletePic"
      name="1"
      multiple
      :maxCount="10"
    ></u-upload>
    <!-- 输入区域 -->
    <div class="form-container">
      <!-- 账号输入框 -->
      <div class="input-group">
        <img
          class="input-icon"
          src="@/static/icon_account.png"
          alt="账号图标"
        />
        <input
          class="input-box"
          type="text"
          placeholder="请输入账号"
          v-model="account"
        />
      </div>

      <!-- 密码输入框 -->
      <div class="input-group">
        <img
          class="input-icon"
          src="@/static/icon_password.png"
          alt="密码图标"
        />
        <input
          class="input-box"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入密码"
          v-model="password"
        />
        <img
          class="password-icon"
          :src="
            showPassword
              ? '@/static/icon_eye_open.png'
              : '@/static/icon_eye_close.png'
          "
          alt="密码显示切换图标"
          @click="togglePassword"
        />
      </div>
    </div>

    <!-- 功能区域 -->
    <div class="function-area">
      <div class="remember-pwd">
        <input type="checkbox" class="checkbox" v-model="rememberPwd" />
        <label>记住密码</label>
      </div>
      <router-link to="/forgotPassword" class="forgot-pwd"
        >忘记密码？</router-link
      >
    </div>

    <!-- 操作按钮 -->
    <div class="button-area">
      <button
        class="login-button"
        :class="{ disabled: !account || !password }"
        @click="handleAccountLogin"
        :disabled="!account || !password || isLoading"
      >
        {{ isLoading ? "登录中..." : "账号密码登录" }}
      </button>
      <!-- <button class="wechat-login-button" @click="handleWechatLogin">
        <img
          src="@/static/icon_wechat.png"
          alt="微信图标"
          class="wechat-icon"
        />
        <span>微信一键登录</span>
      </button> -->
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
      <p>© 2025 门店管理系统 版权所有</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/utils/api"; // 假设的API模块
import md5 from "js-md5";

const router = useRouter();

// 状态管理
const account = ref("");
const password = ref("");
const showPassword = ref(false);
const rememberPwd = ref(false);
const isLoading = ref(false);

// 生命周期钩子：页面加载时检查是否有记住的密码
onMounted(() => {});

// 切换密码显示状态
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

// 切换记住密码
const toggleRememberPwd = () => {
  rememberPwd.value = !rememberPwd.value;
};

// 账号密码登录
const handleAccountLogin = async () => {
  // let { code, data } = await login({});

  // 前端验证
  if (!account.value || !password.value) {
    ElMessage.error("请输入账号和密码");
    return;
  }
  isLoading.value = true;
  try {
    // 调用登录API
    const response = await login({
      username: account.value,
      password: md5(password.value).toUpperCase(),
    });
    // 登录成功，存储token
    // localStorage.setItem("token", response.data.token);
    // // 处理记住密码逻辑
    // if (rememberPwd.value) {
    //   localStorage.setItem(
    //     "savedUserInfo",
    //     JSON.stringify({
    //       savedAccount: account.value,
    //       savedPassword: password.value,
    //     })
    //   );
    // } else {
    //   localStorage.removeItem("savedUserInfo");
    // }
    // 跳转到首页
    // router.push({ name: "Home" });
  } catch (error) {
    // 登录失败
    ElMessage.error(error.message || "登录失败，请重试");
  } finally {
    isLoading.value = false;
  }
};

// 微信一键登录
const handleWechatLogin = () => {
  // 微信登录流程（假设在浏览器环境中模拟）
  isLoading.value = true;

  // 模拟微信授权登录流程
  setTimeout(async () => {
    try {
      // 获取临时凭证（实际项目中通过微信SDK获取）
      const code = "mock_wx_code_123456";

      // 调用后端接口换取token
      const response = await loginByWechat({ code });

      // 存储token并跳转
      localStorage.setItem("token", response.data.token);
      router.push({ name: "Home" });
    } catch (error) {
      ElMessage.error(error.message || "微信登录失败");
    } finally {
      isLoading.value = false;
    }
  }, 1500); // 模拟网络请求延迟
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部区域 */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
  margin-bottom: 60rpx;
}
.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}
.system-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #1677ff;
}

/* 输入区域 */
.form-container {
  width: 100%;
  margin-bottom: 40rpx;
}
.input-group {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.input-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
  color: #9ca3af;
}
.input-box {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  color: #1f2937;
}
.password-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 20rpx;
  color: #9ca3af;
}

/* 功能区域 */
.function-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 30rpx;
  margin-bottom: 60rpx;
}
.remember-pwd {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #6b7280;
}
.checkbox {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}
.forgot-pwd {
  font-size: 24rpx;
  color: #1677ff;
}

/* 按钮区域 */
.button-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 80rpx;
}
.login-button {
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background-color: #1677ff;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.3);
  transition: all 0.2s;
}
.login-button.disabled {
  background-color: #e5e9f2;
  color: #9ca3af;
  box-shadow: none;
}
.wechat-login-button {
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background-color: #ffffff;
  color: #1677ff;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.1);
}
.wechat-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 底部区域 */
.footer {
  font-size: 22rpx;
  color: #9ca3af;
  margin-bottom: 40rpx;
}
</style>
